<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="短信配置" width="65%" :before-close="handleClose" top="150px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="emailForm" :model="formParams" :rules="ruleForm" label-position="right">
        <div class="flex item-box">
          <div class="title width25">
            返利配置
          </div>
          <div class="content width80">
            <div class="flex" v-for="(second,two) in deductData" :key="two">
              <div class="btn-box-add">
                <el-button v-show="deductIndex==two" size="mini" type="primary" circle icon="el-icon-plus" @click="addDeduct"/>
              </div>
              <el-form-item class="item-clear flex" label="返利区间:">
                <el-input-number :min="0" :max="100000000000000000" :precision="0" v-model="second.pay_money_min" controls-position="right" clearable placeholder="请输入充值最小值" style="margin:0"/>
                  —
                <el-input-number class="marginR20" :min="-1" :max="100000000000000000" :precision="0" v-model="second.pay_money_max" controls-position="right" clearable placeholder="请输入充值最大值"/>
              </el-form-item>
              <el-form-item class="item-clear  flex" label="返利比例:">
                <el-input-number :min="0" :max="10000" :precision="0" v-model="second.rebate_rate" controls-position="right" clearable placeholder="请输入充值返利比例"/>
              </el-form-item>
              <div class="btn-box-delete" label-width="60px">
                <el-tooltip content="删除配置" v-show="deductData.length != 1">
                  <el-button class="marginL10" size="mini" type="danger" circle icon="el-icon-minus" @click="deleteDeduct(two)"/>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('emailForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addAllocation,
  editAllocation
} from "@/api/config";

export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      isShow: false,
      deductData:[
        { pay_money_min: 0,min_show:false,pay_money_max: 0,rebate_rate: 0,deduct:0}
      ],
      deductIndex:0,
      formParams: {},
      ruleForm: {},
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.deductData = JSON.parse(JSON.stringify(that.data))
        that.deductData.map(item=>{
          item.min_show=true
          item.deduct=0
          item.rebate_rate=item.rebate_rate*100
        })
        that.deductIndex=that.deductData.length-1
        that.deductData[that.deductIndex].min_show=false
      } else {
        that.deductIndex=0
        that.deductData = [
          { pay_money_min: 0,min_show:false,pay_money_max: 0,rebate_rate: 0,deduct:0}
        ]
      }
    },
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this,params = JSON.parse(JSON.stringify(that.data)),deductData=JSON.parse(JSON.stringify(that.deductData));
      deductData.map((item,index)=>{
        if(index==0){
          item.deduct=0
        }else{
          item.deduct=deductData[index-1].pay_money_max*that.$public.mathNumberDivideWan(item.rebate_rate-deductData[index-1].rebate_rate)+deductData[index-1].deduct
        }
        item.pay_money_min=that.$public.mathNumberMultiply(item.pay_money_min,10000)
        if(item.pay_money_max!=-1){
          item.pay_money_max=that.$public.mathNumberMultiply(item.pay_money_max,10000)
        }
      })
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (!params) {
            addAllocation(deductData).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editAllocation(deductData).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 新增配置
    addDeduct(){
      let noData=[];
      this.deductData.map((item,index)=>{
        item.min_show=true
        if(item.pay_money_min >= item.pay_money_max){
          item.min_show=false
          noData.push(item)
        }
        if (index!=0) {
          if(item.pay_money_min <= this.deductData[index-1].pay_money_max){
            item.min_show=false
            noData.push(item)
          }
        }
      })
      if(noData.length){
        return this.$message.error('请输入正确的区间值')
      }
      this.deductIndex++
      this.deductData.push({
        pay_money_min:this.deductData[this.deductIndex-1].pay_money_max+1,
        min_show:false,
        pay_money_max: 0,
        rebate_rate: 0,
        deduct:0
      })
    },
    // 删除配置
    deleteDeduct(index){
      this.deductIndex--
      this.deductData[index-1].min_show=false
      this.deductData.splice(index,1,)
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.btn-box-add{
  width: 40px;
  margin-top: 5px;
  margin-left: -10px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  margin-top: 5px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
</style>
